<template>
  <div class="order_info" >
    <div class="info_td">
      <div class="item number">
        <div class="left">订单编号:</div>
        <div class="right"><span class="txt">{{order_id}}</span><span class="btn" @click="copy">复制</span></div>
      </div>
      <div class="item time">
        <div class="left">下单时间:</div>
        <div class="right">{{info._add_time}}</div>
      </div>
      <div class="item type">
        <div class="left">订单类型:</div>
        <div class="right">普通订单</div>
      </div>
      <div class="item status">
        <div class="left">支付状态:</div>
        <div class="right">{{status._type | pay}}</div>
      </div>
      <div class="item foo">
        <div class="left">支付方式:</div>
        <div class="right">{{status._payType}}</div>
      </div>
    </div>
    <div class="info_dd">
      <div class="item pay_price">
        
        <div class="left">支付金额:</div>
        <div class="right">￥{{info.total_price}}</div>
      </div>
      <div class="item sj_price">
        <div class="left"></div>
        <div class="right">实付款:<span style="color:#fc4141;font-size:15px;font-weight:bold;">￥{{info.total_price}}</span></div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
    props:{
        order_id:{
            type:String
        },
        
        info:{
            type:Object
        }
        ,status:{
            type:Object
        }
    },
    filters:{
        pay(val){
            if(val == 1){
                return "已支付"
            }else{
                return "未支付"
            }
        }
    }
    ,methods:{
        copy(){
            let txt = document.querySelector('.txt')
            // console.log(txt)
            // txt.select()
            document.execCommand('Copy')
            this.$toast.show("复制成功",500)
        }
    }
};
</script>

<style lang="scss" scoped>
.order_info {
    
  .info_td,.info_dd {
      background-color: #fff;
      margin-top: 8px;
      .item{
          height: 43px;
          padding: 0 15px;
          display: flex;
          justify-content:space-between;
          align-items: center;
          .left{
              color: #282828;
              font-size: 14px;
             
          }
          .right{
              color: #999;
              font-size: 14px;
          }
      }
      .number{
          .right{
              display: flex;
              align-items: center;
              .btn{
                  display: inline-block;
                  width: 45px;
                  height: 20px;
                  color: #333;
                  text-align: center;
                  line-height: 20px;
                  margin-left: 5px;
                  border: 1px solid #333;
              }
          }
      }
  }

  .info_dd{
      margin-top: 8px;
  }
}
</style>

